<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/lib/layui-v2.6.3/css/layui.css}" media="all">
    <script type="text/javascript" th:src="@{/static/lib/layui-v2.6.3/layui.js}"></script>
    <script type="text/javascript" th:src="@{/static/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/jquery-1.9.1.min.js}"></script>
</head>
<body>
<form id="form1" action="" method="" class="layui-form">
    <input type="hidden" name="imgUrl" id="imgUrl">
    <div class="layui-form-item" style="width: 300px;display:inline-block;">
        <label class="layui-form-label">商品名称:</label>
        <div class="layui-input-block">
            <input type="text" name="goodsName" placeholder="请输入商品名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="width: 300px;display:inline-block;">
        <label class="layui-form-label">上传图片:</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>请选择图片
            </button>
        </div>
    </div>
    <div class="layui-form-item" style="width: 300px;display:inline-block;">
        <label class="layui-form-label">库存:</label>
        <div class="layui-input-block">
            <input type="text" name="goodsCount" placeholder="请输入库存" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="width: 300px;display:inline-block;">
        <label class="layui-form-label">单价:</label>
        <div class="layui-input-block">
            <input type="text" name="goodsPrice" placeholder="请输入单价" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item"
         style="display: inline-block; margin-top: 10px; position: relative; left: -20px; width: 600px;">
        <label class="layui-form-label">所属分类:</label>
        <div class="layui-input-block">
            <select name="superiorId" lay-verify="required">
                <option value="">商品分类</option>
                <span th:each="cg:${cs}">
							<option th:value="${cg.id}" th:text="${cg.classificationName}"></option>
						</span>
            </select>
        </div>
    </div>
</form>
<div style="text-align:center">
    <button id="add11" class="layui-btn">确定新增</button>
</div>
</body>
<script>
		layui.use(['layer', 'jquery', 'form', 'upload'], function() {
			var upload = layui.upload;
			var layer = layui.layer;
			var $ = layui.jquery;
			var form = layui.form;

			//执行实例 上传文件
			var uploadInst = upload.render({
				elem: '#test1' //绑定元素
					,
				url: '/goods/upload/' //上传接口
					,
				accept: 'images' //指定允许上传时文件类型
					,
				acceptMime: 'image/*' //规定打开文件筛选框时筛选文件类型
					,
				done: function(res) { //上传完毕回调 res必须为json格式
					console.info(res);
					console.info(res.imgUrl);
					$("#imgUrl").val(res.imgUrl);
				},
				error: function() {
					//请求异常回调
				}
			});

			//ajax添加
			$(document).on('click', '#add11', function() {
				var params = $("#form1").serialize();
				$.ajax({
					url: "/goods/add",
					type: "post",
					data: params,
					//请求发送完之后的回调函数
					success: function(info) {
						if (info == 1) {
							alert("添加成功！");
						} else {
							alert("添加失败！");
						}
						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);
						//刷新父类页面
						window.parent.location.reload();
					}
				});
			});


		});
	</script>
</html>
